// 获取用户名
const username = document.querySelector('.username')
// 获取密码
const password = document.querySelector('.password')
// 获取手机号
const phone = document.querySelector('.phone')
// 获取验证码
const pwdCode = document.querySelector('.pwdCode')
// 验证码点击按钮
const code = document.querySelector('.code')
// 获取所有的input
const ipt = document.querySelectorAll('.qq-form-item input')
// 所有input的点击事件
for (let i = 0;i<ipt.length;i++) {
    ipt[i].addEventListener('click',function(){
        // console.log(1);
        ipt[i].style.borderColor = '#549df8'
    })
}




// 用户名的正则表达
let btn1 = false
username.addEventListener('click',function(){
    const span = username.nextElementSibling
    span.style.display = 'none'
})
username.addEventListener('blur',function(){
    const span = username.nextElementSibling
    const reg = /^[a-zA-Z0-9-_]{4,10}$/
    const val = username.value
    if(reg.test(val)){
        username.style.borderColor = '#549df8'
        span.style.display = 'none'
        btn1 = true
    }else {
        username.style.borderColor = '#ff5b5b'
        span.style.display = 'block'
        btn1 = false
    }
    
})



// 密码的正则表达
let btn2 = false
password.addEventListener('click',function(){
    const span = password.nextElementSibling
    span.style.display = 'none'
})
password.addEventListener('blur',function(){
    const span = password.nextElementSibling
    const reg = /^[a-zA-Z0-9-_]{6,16}$/
    const val = password.value
    if(reg.test(val)){
        btn2 = true
        password.style.borderColor = '#549df8'
        span.style.display = 'none'
    }else {
        btn2 = false
        password.style.borderColor = '#ff5b5b'
        span.style.display = 'block'
    }
})


// 手机号校验
let btn3 = false
phone.addEventListener('click',function(){
    const span = phone.nextElementSibling
    span.style.display = 'none'
    pwdCode.style.display = 'block'
    code.style.display = 'block'
})
phone.addEventListener('blur',function(){
    const span = phone.nextElementSibling
    const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
    const val = phone.value
    if(reg.test(val)){
        phone.style.borderColor = '#549df8'
        span.style.display = 'none'
        btn3 = true
    }else {
        phone.style.borderColor = '#ff5b5b'
        span.style.display = 'block'
    }
})

// 收取验证码
const verification = document.querySelector('.verification')
function random(min,max) {
    
    return Math.floor(Math.random() * (max - min+1)) + min;
}
let flag = true

code.addEventListener('click',function(){

    if(flag) {
        let str = ''
        flag = false
        let i = 5
        code.innerHTML = `0${i}秒重新获取`
        let id = setInterval(function () {
            i--
            code.innerHTML = `0${i}秒重新获取`
            if (i === 0){
                for(let j=1;j<=6;j++){
                    str += String(random(0,9))
                }
                code.innerHTML = '重新获取'
                clearInterval(id)
                flag = true
                verification.innerHTML = str
            }
        },1000)
    }
})
const qqForm = document.querySelector('.qq-form-wrap')
const check = document.querySelector('.check')
const arr = JSON.parse(localStorage.getItem('vel')) || []

// 获取注册按钮
const btn = document.querySelector('.btnn') 
    btn.addEventListener('click',function(e){
        e.preventDefault()
        // console.log(pwdCode.value === verification.innerHTML);
        if(btn1&&btn2&&btn3&&pwdCode.value === verification.innerHTML&&check.checked) {
            const usernameValue = document.querySelector('.username').value.trim()
            const passwordValue = document.querySelector('.password').value.trim()
            const obj = {
                user: usernameValue,
                password: passwordValue
            }
            arr.push(obj)
            let vel = JSON.stringify(arr)
            localStorage.setItem('vel',vel)
            alert('注册成功')
                window.location.href="../../郝云奇/denglu.html"
            // 变为登录
        }else {
            alert('请按照流程正确注册')
        }
    })


    